import axios from 'axios'
import React, { Component } from 'react'
import PubSub from 'pubsub-js'

export default class Search extends Component {
    search = () => {
        // 获取用户输入(连续解构赋值+重命名)
        const { keyWordElement: { value: keyWord } } = this
        PubSub.publish('gihub_user', { isFirst: false, isLoading: true })
        // 发送网络请求
        axios.get(`https://api.github.com/search/users?q=${keyWord}`).then(
            response => {
                PubSub.publish('gihub_user', { isFirst: false, isLoading: false, users: response.data.items })
            },
            error => {
                PubSub.publish('gihub_user', { isLoading: false, err: error.message })
            }
        )
    }
    render() {
        return (
            <section className='jumbotron'>
                <h3 className='jumbotron-heading'>搜索Github用户</h3>
                <div>
                    <input ref={c => this.keyWordElement = c} type="text" placeholder='请输入你也搜索的用户名' />
                    <button onClick={this.search}>搜索</button>
                </div>
            </section>
        )
    }
}
